<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>对象语法</title>
	<style type="text/css" media="screen">
		.active{
			color: red;
		}
		.baseStyles{
			color: #ccc;
		}
		.overridingStyles{
			font-size: 50px;
		}
	</style>
</head>
<body>
	<div id="app-1" v-bind:class="{active: isActive}">{{message}}</div>
	<!-- <div class="static"> -->
		<!-- v-bind:class="{active:isActive,'text-danger':hasError}" -->
		<!-- isActive和hasError为真值时，浏览器才会将其渲染上去 -->
	<!-- </div> -->

          <!-- 传递数组 -->
          <!-- <div v-bind:class = "[activeClass,errorClass]"></div> -->
          <!-- 三元表达式 -->
          <!-- <div v-bind:class = "[isActive ? activeClass : '', errorClass]"></div>  -->
          <!-- 上面的例子只有在isActive为true时才会添加activeClass -->
          <!-- 数组语法中使用对象语法 -->
          <!-- <div v-bind:class="[{active:isActive},errorClass]"></div> -->
          <!-- 用在组件上 -->
          <!-- <my-component class="baz boo"></my-component> -->
          <!-- 绑定数据里的对象 -->
          <div id="app-3" v-bind:class="classObject">{{message}}</div>
          <!-- 绑定内联样式 -->
          <div id="app-4" v-bind:style = "{color:activeColor,fontSize:fontSize + 'px'}">{{message}}</div>
          <!-- 直接绑定到样式对象 -->
          <div id="app-5" v-bind:style = "styleObject">{{message}}</div>
          <!-- 绑定数组语法 -->
          <div id="app-6" v-bind:style="[baseStyles, overridingStyles]">
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script type="text/javascript">
	// var vm = new Vue({
	// 	data: {
	// 	      activeClass: 'active',
	// 	      errorClass: 'textdanger'
	// 	}
	// })
          
          // var app1 = new Vue({

          // })
          // Vue.component('my-component',{
          // 	          template: '<p class="foo bar"></p>'
          // })
          var app1 = new Vue({
          	       el: '#app-1',
          	       data:{
                       message: 'hello vue',
                       isActive: true,
          	       }
          })

          var app3 = new Vue({
          	       el: '#app-3',
          	       data:{
          	       	message: 'hello word',
          	       	classObject: {
          	       		active:true,
          	       	}
          	       }
          })
          var app4 = new Vue({
          	       el: '#app-4',
          	       data:{
          	       	message: 'hello word',
          	       	activeColor: "blue",
          	       	fontSize:30
          	       }
          })

          var app5 = new Vue({
          	       el: '#app-5',
          	       data:{
          	       	message: 'VUE',
          	       	styleObject: {
          	       		color: 'pink',
          	       		fontSize: '20px'
          	       	}
          	       }
          })

          // var app6 = new Vue({
          // 	       el: '#app-6',
          // 	       data:{
          // 	       	message: 'VUE',
          // 	       	baseStyles: 'aaa',
          // 	       	overridingStyles: 'bbb'
          // 	       }
          // })
</script>
</html>